<template>
  <div>
    <div class="player-card" v-for="p in player">
      <el-image :src="p.photo" style="width: 100px;height: 100px;"></el-image>
      <div class="player-info">
        <h3>{{ p.name}}</h3>
        <p>{{ p.good }}</p>
        <div class="rating">
          <span>评分: {{ p.score }}</span>
        </div>
        <span class="games">{{ p.gamesType }}</span>
        <button @click="playerHire(p.gid)">找ta陪玩</button>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from "axios";

  export default {
    data() {
      return {
        player: [],
        id: null,
      }
    },
    mounted() {
      const id = this.$route.query.id;
      if (id){
        this.id = JSON.parse(id);
        this.hirePlayer();
      }
    },
    methods: {
      playerHire(gid) {
        this.$router.push({ path: '/accompany', query: { gid: JSON.stringify(gid) } });
      },
      hirePlayer() {
        axios.get(`http://localhost:8083/play/Tab?id=${this.id}`).then(res => {
          this.player = res.data.data;
          console.log(this.player);
        })
      }
    }
  }
</script>
<style scoped>
button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}
button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}
</style>
